<template>
  <el-dialog title="时效管控" :visible.sync="visible" append-to-body width="555px" @close="handleClose">
    <avue-form ref="form" v-model="form" :option="option" @submit="handleSubmit">
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button type="primary" @click="handleSubmit" size="small">确认</el-button>-->
      <!--      </span>-->
    </avue-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'timelyControlDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    },
    stationList: {
      type: Array,
      default: () => []
    },
    rowList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      option: {
        row: true,
        submitBtn: true,
        submitText: '确认',
        emptyBtn: false,
        labelWidth: '150',
        column: [
          {
            label: '校验工站',
            prop: 'station',
            type: 'select',
            dicData: this.stationList,
            span: 24,
            rules: [
              {
                required: true,
                message: '请请选择校验工站',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '校验条件',
            prop: 'criteria',
            type: 'select',
            span: 24,
            dicData: [
              {
                label: '小于',
                value: '<'
              },
              {
                label: '大于',
                value: '>'
              }
            ],
            rules: [
              {
                required: true,
                message: '请选择校验条件',
                trigger: 'blur'
              }
            ],
            control: (val, form) => {
              if (val === '<') {
                return {
                  errorHandle: { display: true }
                };
              } else {
                return {
                  errorHandle: { display: false }
                };
              }
            }
          },
          {
            label: '校验时间（分）',
            prop: 'time',
            type: 'number',
            value: undefined,
            minRows: 1,
            span: 24
          },
          {
            label: '异常处理',
            prop: 'errorHandle',
            type: 'select',
            span: 24,
            dicData: [
              {
                label: '回退生产',
                value: 'ROLLBACK_PRODUCTION'
              },
              {
                label: '回退刷新',
                value: 'ROLLBACK_REFRESH'
              }
            ],
            value: 'ROLLBACK_REFRESH',
            rules: [
              {
                required: true,
                message: '请选择异常处理',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '提示信息',
            prop: 'violationMsg',
            placeholder: '请输入提示信息',
            type: 'textarea',
            span: 24
          }
        ]
      }
    };
  },
  watch: {
    stationList: {
      handler(val) {
        const column = this.findObject(this.option.column, 'station');
        column.dicData = val;
      },
      immediate: true
    },
    rowList: {
      handler(value) {
        console.log(value, 'value');
        this.form = value;
      }
    }
  },
  methods: {
    handleSubmit(form, done) {
      this.$emit('handleSubmit', form);
      this.$emit('update:visible', false);
      done();
    },
    handleClose() {
      this.$emit('update:visible', false);
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style scoped></style>
